<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>悬赏答疑</title>
    <link href="http://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
    <link rel="stylesheet" href="public/lib/layer/css/layui.css">
    <link rel="stylesheet" href="public/css/public.css">
    <link rel="stylesheet" href="public/css/reward.css">
</head>

<body>
    <div class="header">
        <div class="nav-contact">
            <div class="row">
                <ul class="address"></ul>
                <div class="logo">
                	<a href="index.html">
                		<img src="public/images/sdk_logo.jpg" alt="">
                	</a>
                </div>
            </div>
        </div>
        <div class="row nav-menu">
            <div class="inline-block menu"></div>
            <div class="inline-block tool-side">
                <!-- <input class="search-bar hide" type="text"><span class="inline-block search-btn"></span> -->
            </div>
        </div>
    </div>
    <div class="contact-body" id="myReward">
        <div class="top-contain">
            <div class="row top-content">
                <div class="left-panel fl">
                    <div class="t-title1">内容引导</div>
                    <ul class="content-lists" id="J_content-explain"></ul>
                </div>
                <div class="right-panel fr">
                    <div class="table-row-group table">
                        <ul class="table-row">
                            <li class="table-cell p-bg1 show-reward-layer">
                                <div class="project-name p-color2">个人定制悬赏</div>
                                <div class="project-btn">发布悬赏</div>
                            </li>
                            <li class="table-cell p-bg2 show-reward-layer">
                                <div class="project-name p-color1">个人诊断悬赏</div>
                                <div class="project-btn">发布悬赏</div>
                            </li>
                        </ul>
                        <ul class="table-row">
                            <li class="table-cell p-bg3 show-reward-layer">
                                <div class="project-name p-color1">季度投资策略</div>
                                <div class="project-btn">发布悬赏</div>
                            </li>
                            <li class="table-cell p-bg4 show-reward-layer">
                                <div class="project-name p-color2">半年投资策略</div>
                                <div class="project-btn">发布悬赏</div>
                            </li>
                        </ul>
                        <ul class="table-row">
                            <li class="table-cell"></li>
                            <li class="table-cell p-bg2 show-reward-layer">
                                <div class="project-name p-color1">全年投资策略</div>
                                <div class="project-btn">发布悬赏</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="mid-contain">
            <div class="row mid-content">
                <div class="mid-left fl">
                    <div class="mid-head">
                        <div class="inline-block t-title2">我的悬赏</div>
                        <form class="layui-form" action="" id="my-reward">
                            <select name="" id="" class="select" lay-filter="my-reward">
                                <option value="TIME">按时间排序</option>
                                <option value="MONEY">按金额排序</option>
                                <option value="STATUS">按状态排序</option>
                            </select>
                        </form>
                    </div>
                    <div class="my-reward" id="J_myReward">
                        
                    </div>
                </div>
                <div class="mid-right fl">
                    <div class="common-problem">
                        <!-- <h3>常见问题</h3>
                        <ul class="problem-lists">
                            <li>如何发布悬赏？</li>
                            <li>悬赏的有效期是多少？</li>
                            <li>如果悬赏失败，那我的悬赏币会返还么？</li>
                        </ul> -->
                    </div>
                </div>
            </div>
        </div>
        <div class="mid-contain">
            <div class="row mid-content">
                <div class="mid-left fl">
                    <div class="mid-head">
                        <div class="inline-block t-title2">所有悬赏</div>
                        <form class="layui-form" action="" id="all-reward">
                            <select name="" id="" class="select" lay-filter="all-reward">
                                <option value="TIME">按时间排序</option>
                                <option value="MONEY">按金额排序</option>
                                <option value="STATUS">按状态排序</option>
                            </select>
                        </form>
                    </div>
                    <div class="all-reward" id="J_allReward">
                       
                    </div>
                </div>
                <div class="mid-right fl">
                    <div class="common-problem">
                        <!-- <h3>常见问题</h3>
                        <ul class="problem-lists">
                            <li>如何发布悬赏？</li>
                            <li>悬赏的有效期是多少？</li>
                            <li>如果悬赏失败，那我的悬赏币会返还么？</li>
                        </ul> -->
                    </div>
                </div>
            </div>
        </div>
        <div class="appointment"></div>
    </div>
    <!-- 页脚 -->
    <div class="footer"></div>
    <div class="reward-layer" id="rewardLayer">
        <div class="reward-layer-head">发布悬赏</div>
        <div class="reward-layer-body">
            <div class="recharge-user-info">
                <div class="user-info-contain inline-block">
                	<div class="user-info-item" id="J_reward_userInfo"></div>
                </div>
            </div>
        	<form class="layui-form" action="" id="J_reward_form" lay-filter="reward-radio">
	            <div class="reward-layer-type" id="J_reward_radio" lay-filter="radio"></div>
	            <div class="reward-layer-content">
	            	<div class="inline-block reward-layer-title">
						<p>悬赏标题</p>
	            		<textarea placeholder="请输入您的标题" class="reward-layer-title-textarea" id="J_reward_title"></textarea>
	            	</div>
	            	<div class="inline-block reward-layer-detail">
	            		<p>悬赏说明</p>
	            		<textarea placeholder="请说明您的持股情况，仓位，资金量等信息" class="reward-layer-detail-textarea" id="J_reward_context"></textarea>
	            	</div>
	            </div>
        	</form>
            <div class="submit-reward" id="J_submit_reward">
            	<input type="button" class="submit-reward-btn" value="发布悬赏">
            </div>
            <div class="select-pay-type">
                <div id="J_pay_type">
                    <p>余额不足，请选择支付方式</p>
                    <ul class="payment-list">
                        <li class="payment-item payment-union" data-type="union"></li>
                        <li class="payment-item payment-alipay current-payment" data-type="alipay"></li>
                        <li class="payment-item payment-weixin" data-type="weixin"></li>
                    </ul>
                    <div class="wx-qrcode"><img src="public/images/sdk_wx_pay.png" alt="" /></div>
                    <input type="hidden" id="J_oweMoney">
                </div>
            </div>
        </div>
    </div>
    <script id="J_userInfo_tpl" type="text/html">
        <div class="rewarder-icon fl"><img src="{{G.defaultAvator}}" data-lazyload-img="{{G.uploadurl}}/avator/{{d.userId}}.png" class="avator">
        </div>
        <div class="user-name fl">用户名: <span class="name">{{d.username}}</span></div>
        <div class="user-money-remain fr">剩余金币: <span class="money">{{d.balance}}</span></div>
    </script>
    <script id="J_reward_radio_tpl" type="text/html">
        {{# d.forEach(function(val,index){}}
        <input type="radio" name="rewardType" value="{{val.type}}" data-value="{{val.value}}" title="<img src='public/images/{{val.value}}.png'>" lay-skin="primary" lay-filter="filter" class="J_radio">
        {{# }); }}
    </script>
    <script id="J_myReward_tpl" type="text/html">
        <ul class="mid-reward-lists">
        {{# d.list.forEach(function(val,index){ }}
            <li>
                <div class="reward-head">
                    <div class="inline-block rewarder-icon"><img src="{{G.defaultAvator}}" data-lazyload-img="{{G.uploadurl}}/avator/{{val.userId}}.png" alt="" class="avator"></div>
                    <div class="inline-block rewarder-name">{{val.createUser.username}}</div>
                    <div class="inline-block color-gray size18">发布了悬赏·<span class="rewarder-time">{{new Date(val.createTime).format('YYYY-MM-DD HH:ii:ss')}}</span></div>
                    <!-- <div class="inline-block color-gray size14"><span class="reward-ups">{{val.praiseNumber}}个赞数</span></div> -->
                    <div class="inline-block color-gray size14"><span class="reward-reply">{{val.commentsNumber}}条评论</span></div>
                </div>
                <div class="reward-contain">
                    <p class="reward-title">{{val.title}}</p>
                    <p class="reward-content">{{val.content}}</p>
                    <div class="inline-block reward-btn" data-user="{{val.userId}}" data-id="{{val.rewardId}}" data-type="show">查看竞赏</div>
                    {{# if(val.finish){ }}
                        <div class="inline-block reward-status">已完成</div>
                    {{# }else{ }}
                        <div class="inline-block reward-status">未完成</div>
                    {{# }; }}
                </div>
                <div class="reward-after">
                    <span class="reward-value">{{val.amountPay}}悬赏币</span>
                </div>
            </li>
        {{# }); }}
        </ul>
        {{# if(d.count > d.pageSize){ }}
        <div class="reward-pagination">
            <span class="switch-btn pre-btn" data-btn="pre" data-type="my">上一页</span>
            <div class="inline-block pages">
                <div class="page J_pageId"></div>
            </div>
            <!-- <div class="inline-block pages">
                {{# for(var i = 1; i < d.count/d.pageSize + 1; i++){ }}
                    <div class="page {{# if(i ==1 ){ }}current-page{{# }; }}" data-page="{{i}}" data-type="my">{{i}}</div>
                {{# }; }}
            </div> -->
            <span class="switch-btn next-btn" data-btn="next" data-type="my">下一页</span>
        </div>
        {{# }; }}
    </script>
    <script id="J_allReward_tpl" type="text/html">
        <ul class="mid-reward-lists">
        {{# d.list.forEach(function(val,index){ }}
            <li>
                <div class="reward-head">
                    <div class="inline-block rewarder-icon"><img src="{{G.defaultAvator}}" data-lazyload-img="{{G.uploadurl}}/avator/{{val.userId}}.png" alt="" class="avator"></div>
                    <div class="inline-block rewarder-name">{{val.createUser.username}}</div>
                    <div class="inline-block color-gray size18">发布了悬赏·<span class="rewarder-time">{{new Date(val.createTime).format('YYYY-MM-DD HH:ii:ss')}}</span></div>
                    <!-- <div class="inline-block color-gray size14"><span class="reward-ups">{{val.praiseNumber}}个赞数</span></div> -->
                    <div class="inline-block color-gray size14"><span class="reward-reply">{{val.commentsNumber}}条评论</span></div>
                </div>
                <div class="reward-contain">
                    <p class="reward-title">{{val.title}}</p>
                    <p class="reward-content">{{val.content}}</p>
                    <div class="inline-block reward-btn" data-user="{{val.userId}}" data-id="{{val.rewardId}}" data-type="show">查看竞赏</div>
                    <div class="inline-block reward-status">
                        {{# if(val.finish){ }}
                            已完成
                        {{# }else{ }}
                            未完成
                        {{# }; }}
                    </div>
                </div>
                <div class="reward-after">
                    <span class="reward-value">{{val.amountPay}}悬赏币</span>
                </div>
            </li>
        {{# }); }}
        </ul>
        {{# if(d.count > d.pageSize){ }}
        <div class="reward-pagination">
            <span class="switch-btn pre-btn" data-btn="pre" data-type="all">上一页</span>
            <!-- <span id=""></span> -->
            <!-- <div class="inline-block pages">
                {{# for(var i = 1; i < d.count/d.pageSize + 1; i++){ }}
                    <div class="page {{# if(i ==1 ){ }}current-page{{# }; }}" data-page="{{i}}" data-type="all">{{i}}</div>
                {{# }; }}
            </div> -->
            <div class="inline-block pages">
                <div class="page J_pageId"></div>
            </div>
            <span class="switch-btn next-btn" data-btn="next" data-type="all">下一页</span>
        </div>
        {{# }; }}
    </script>
    <script id="newReward" type="text/html">
        <li>
            <div class="reward-head">
                <div class="inline-block rewarder-icon"><img src="{{d.createUser.avatorUrl}}" alt=""></div>
                <div class="inline-block rewarder-name">{{d.createUser.username}}</div>
                <div class="inline-block color-gray size18">发布了悬赏·<span class="rewarder-time">{{new Date(d.createTime).format('YYYY-MM-DD HH:ii:ss')}}</span></div>
                <!-- <div class="inline-block color-gray size14"><span class="reward-ups">{{d.praiseNumber}}个赞数</span></div> -->
                <div class="inline-block color-gray size14"><span class="reward-reply">{{d.commentsNumber}}条评论</span></div>
            </div>
            <div class="reward-contain">
                <p class="reward-title">{{d.title}}</p>
                <p class="reward-content">{{d.content}}</p>
                <div class="inline-block reward-btn" data-user="{{d.userId}}" data-id="{{d.rewardId}}" data-type="show">查看竞赏</div>
                <div class="inline-block reward-status">未完成</div>
            </div>
            <div class="reward-after">
                <span class="reward-value">{{d.amountPay}}悬赏币</span>
            </div>
        </li>
    </script>
    <script src="public/lib/layer/layui.all.js"></script>
    <script src="public/js/G.js"></script>
    <script src="public/js/user.js"></script>
    <script src="public/js/reward.js"></script>
    <script src="public/js/rechargeApi.js"></script>
    <script src="public/js/rechargeOrder.js"></script>
    <script src="public/js/public.js"></script>
    <script src="http://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    <script>
	contentGuideApi.getOne("悬赏答疑", function(data){
	    var html = "";
	    for (var i = 0; i < data.length; i++) {
	        var value = data[i].value;
	        html += "<li>" + (i + 1) + "、" + value + "</li>";
	    }
	    $("#J_content-explain").html(html);
	})
    var rewardType = [{
        value: '18',
        title: '个股诊断',
        type: 'A'
    },{
        value: '288',
        title: '季度策略',
        type: 'B'
    },{
        value: '488',
        title: '半年策略',
        type: 'C'
    },{
        value: '688',
        title: '年度策略',
        type: 'D'
    }
    // ,{
    //     value: '0.01',
    //     title: '其他悬赏',
    //     type: 'E'
    // }
    ]
    //悬赏对象
    var rewardObject = {
        type:'',
        title: '',
        content: ''
    }
    //充值对象
    var rechargeObject = {
        value: 0, //悬赏金额
        balance: 0 //用户余额
    }
    //悬赏参数
    var rewardParams = {
        myCount: 0,
        allCount: 0,
        timer: null,
        isPaying: false,
        my:{
            orderRule:'TIME',
            order: 'DESC',
            pageSize: 3,
            pageId: 1,
        },
        all:{
            orderRule:'TIME',
            order: 'DESC',
            pageSize: 3,
            pageId: 1,
        }
    }
    //动态渲染radio
    laytpl($('#J_reward_radio_tpl').html()).render(rewardType,function(type){
        $('#J_reward_radio').html(type)
        form.render('radio','reward-radio')
    })
    //充值弹窗
    function openRechargeLayer(){
    	layer.closeAll()
    	layer.open({
    	    area: ['800px', 'auto'],
    	    title: false,
    	    closeBtn: 0,
    	    shadeClose: true,
    	    type: 1,
            scrollbar: false,
    	    content: $('#rechargeLayer'),
    	    end: function(){
    	    	$('#J_recharge_form')[0].reset()
    	    }
    	})
    }
    //发布悬赏弹窗
    function openRewardLayer(){
        if(!G.getCookie('jwt')){
            loginModel();
            return
        }
    	layer.closeAll();
        user.getInfo({},function(data){
            rechargeObject.balance = data.balance;
            laytpl($('#J_userInfo_tpl').html()).render(data,function(html){
                $('#J_reward_userInfo').html(html)
            })
            lazyload()
        	layer.open({
        	    area: ['800px', 'auto'],
        	    title: false,
        	    closeBtn: 2,
        	    type: 1,
                scrollbar: false,
        	    content: $('#rewardLayer'),
        	    cancel: function(){
        	    	$('#J_reward_form')[0].reset();
                    $('.J_radio').each(function(index,val){
                        if($(this).val() !== rewardObject.type){
                            $(this).prop('disabled',false)
                        }
                    })
                    form.render('radio','reward-radio')
                    $('#J_submit_reward').show()
                    $('#J_pay_type').hide()
                    //清除定时器
                    clearInterval(rewardParams.timer);
                    rewardParams.isPaying = false;
                    layer.msg('悬赏已取消')
                    $('#J_reward_title').removeProp('readonly')
                    $('#J_reward_context').removeProp('readonly')
        	    }
        	})
        })
    }

    $(document).on('click','.show-reward-layer .project-btn',function(){
        openRewardLayer()
    })
    $(document).on('click','#openRechargeLayer',function(){
    	openRechargeLayer()
    })

    layui.form.on('radio(filter)',function(data){
        var value = $(data.elem).data('value');
        rechargeObject.value = value;
        rewardObject.type = data.value;
    });
    //发布悬赏
    $(document).on('click','.submit-reward-btn',function(){
        var title = $('#J_reward_title').val()
        var content = $('#J_reward_context').val()
        if(!title){
            layer.msg('请输入悬赏标题')
            return;
        }
        if(!content){
            layer.msg('请输入悬赏内容')
            return;
        }
        if(!rewardObject.type){
            layer.msg('请选择悬赏类型')
            return;
        }
        rewardObject.title = title;
        rewardObject.content = content;
        $('#J_reward_title').prop('readonly','readonly')
        $('#J_reward_context').prop('readonly','readonly')
        if(rechargeObject.value <= rechargeObject.balance){
            reward.add(JSON.stringify(rewardObject),function(data){
                layer.msg('发布成功！')
                // laytpl($('#newReward').html()).render(data,function(html){
                //     $('#J_myReward ul').prepend($(html))
                // })
                setTimeout(function(){
                    location.reload()
                    // layer.closeAll()
                },1500)
            })
        }else{
            console.log('没钱')
            var oweMoney = rechargeObject.value - rechargeObject.balance;
            console.log(oweMoney)
            $('#J_oweMoney').val(oweMoney);
            $('#J_submit_reward').hide()
            $('#J_pay_type').animate({
                opacity: 'show'
            }, 500)
            laytpl($('#J_reward_radio_tpl').html()).render(rewardType,function(type){
                $('.J_radio').each(function(index,val){
                    if($(this).val() !== rewardObject.type){
                        $(this).attr('disabled','disabled')
                    }
                })
                form.render('radio','reward-radio')
            })
        }
        
    })

    //余额不足支付方式显示,点击支付方式进行支付
    $(document).on('click','.payment-item',function(){
        if(rewardParams.isPaying){
            layer.msg('支付尚未完成，请勿重复支付')
            return;
        }
        var payType = $(this).data('type');
        switch(payType){
            case 'weixin':
                rewardParams.isPaying = true;
                var oweMoney = $('#J_oweMoney').val();
                var orderId = -1;
                rechargeApi.create(oweMoney,{},function(data) {
                    orderId = data.rechargeOrderId;
                    G.get("pay/wx/rechargeOrder/web/" + orderId,{},function(data){
                        layer.confirm('支付是否完成？', {title:false,closeBtn:false,btnAlign: 'c',btn:['完成支付','放弃支付']}, function(index){
                            getPayStatus(orderId,'wx',{},function(order){
                                reward.add(JSON.stringify(rewardObject),function(reward){
                                    layer.msg('支付成功')
                                    setTimeout(function(){
                                        location.reload();
                                    },1500)
                                },function(err){
                                    console.log(err)
                                    layer.msg('悬赏添加失败')
                                })
                            },function(e){
                                layer.msg('支付失败')
                                rewardParams.isPaying = false;
                            })
                        },function(){
                            layer.msg('放弃支付')
                            rewardParams.isPaying = false;
                        });
                        wxPayTpl()
                        $('#qrcode').qrcode(data.codeUrl);
                        layer.open({
                            area: ['300px', 'auto'],
                            title: false,
                            closeBtn: 1,
                            type: 1,
                            shadeClose: false,
                            scrollbar: false,
                            content: $('#J_wx_tpl')
                        })
                    })
                })
                break;
            case 'alipay':
                rewardParams.isPaying = true;
                var oweMoney = $('#J_oweMoney').val();
                var newOpen = window.open();
                var orderId = -1;
                rechargeApi.create(oweMoney,{},function(data) {
                    orderId = data.rechargeOrderId;
                    newOpen.location = rechargeOrder.getUrl(payType,orderId,'web');
                    layer.confirm('支付是否完成？', {title:false,closeBtn:false,btnAlign: 'c',btn:['完成支付','放弃支付']}, function(index){
                        getPayStatus(orderId,'alipay',{},function(){
                            reward.add(JSON.stringify(rewardObject),function(reward){
                                layer.msg('支付成功')
                                setTimeout(function(){
                                    location.reload();
                                },1500)
                            },function(err){
                                console.log(err)
                                layer.msg('悬赏添加失败')
                            })
                        },function(){
                            layer.msg('支付失败')
                            rewardParams.isPaying = false;
                        })
                    },function(){
                        layer.msg('放弃支付')
                        rewardParams.isPaying = false;
                    });
                })
                break;
            return;
        }
        
    })

    //获取支付状态
    function getPayStatus(orderId,type,data,success,error){
        rechargeOrder.getStatus(orderId,type,data,success,error)
    }

    //我的悬赏
    function renderMyRewardList(params){
        if(!G.getCookie('jwt')){
            return
        }
        reward.getMyReward(params,function(data){
            rewardParams.myCount = data.count;
            laytpl($('#J_myReward_tpl').html()).render(data,function(html){
                $('#J_myReward').html(html)
                $('#J_myReward .J_pageId').html(params.pageId)
                // $('.current-page').removeClass('current-page');
                // $('.page[data-page="'+params.pageId+'"]').addClass('current-page');
            })
            lazyload()
        })
    }
    //所有悬赏
    function renderAllRewardList(params){
        reward.getList(params,function(data){
            rewardParams.allCount = data.count;
            laytpl($('#J_allReward_tpl').html()).render(data,function(html){
                $('#J_allReward').html(html)
                console.log(params.pageId)
                $('#J_allReward .J_pageId').html(params.pageId)
                // $('#J_allReward .current-page').removeClass('current-page');
                // $('#J_allReward .page[data-page="'+params.pageId+'"]').addClass('current-page');
            })
            lazyload()
        })
    }

    renderMyRewardList(rewardParams.my)
    renderAllRewardList(rewardParams.all)
    form.on('select(my-reward)', function(data){
       rewardParams.my.orderRule = data.value;
       if(data.value === 'STATUS'){
            rewardParams.my.order="ASC"
       }
       renderMyRewardList(rewardParams.my)
    }); 
    form.on('select(all-reward)', function(data){
       rewardParams.all.orderRule = data.value;
       if(data.value === 'STATUS'){
            rewardParams.all.order="ASC"
       }
       renderAllRewardList(rewardParams.all)
    }); 
    //悬赏分页
    $(document).on('click','.page',function(){
        var type = $(this).data('type');
        switch (type) {
            case 'my':
                if(!$(this).hasClass('current-page')){
                    rewardParams.my.pageId = $(this).data('page');
                    renderMyRewardList(rewardParams.my)
                }
                break;
            case 'all':
                if(!$(this).hasClass('current-page')){
                    rewardParams.all.pageId = $(this).data('page');
                    renderAllRewardList(rewardParams.all)
                }
                break;
        }
        
    })

    //上一页下一页切换
    $(document).on('click','.switch-btn',function(){
        var btn = $(this).data('btn');
        var type = $(this).data('type');
        var pageId = parseInt($(this).siblings('.pages').find('.J_pageId').html());
        switch (btn) {
            case 'pre':
                if(type === 'all'){
                    if(pageId > 1){
                        rewardParams.all.pageId = pageId - 1;
                        renderAllRewardList(rewardParams.all)
                    }
                }else{
                    if(pageId > 1){
                        rewardParams.my.pageId = pageId - 1;
                        renderMyRewardList(rewardParams.my)
                    }
                }
                break;
            case 'next':
                if(type === 'all'){
                    if(pageId < Math.ceil(rewardParams.allCount/rewardParams.all.pageSize)){
                        rewardParams.all.pageId = pageId + 1
                        renderAllRewardList(rewardParams.all)
                    }
                }else{
                    if(pageId < Math.ceil(rewardParams.myCount/rewardParams.my.pageSize)){
                        rewardParams.my.pageId = pageId + 1
                        renderMyRewardList(rewardParams.my)
                    }
                }
                break;
        }
    })

    //点击支付悬赏/查看悬赏按钮
    $(document).on('click','.reward-btn',function(){
        var type = $(this).data('type');
        var id = $(this).data('id');
        var userId = +$(this).data('user')
        var localUserId = +G.getCookie('sdk_user_id');
        var userType = G.getCookie('sdk_user_type');
        if(userType === 'USER' && userId !== localUserId){
            layer.msg('无法查看他人的悬赏')
        }else{
            G.setCookie('localUserId', localUserId)
            G.setCookie('rewardId', id)
            location.href = "reward-detail.html";
        }
    })
    </script>
</body>

</html>
